<template>
    <div class="emp-box">
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/loginRedirect' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>员工信息</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索 -->
        <el-input size="medium" clearable @clear="clearSearchForm()" placeholder="请输入姓名" v-model="searchForm.name" class="search-box"></el-input>
        <el-input size="medium" clearable @clear="clearSearchForm()" placeholder="请输入用户名" v-model="searchForm.snick" class="search-box"></el-input>
        <el-button type="primary" size="small" @click="searchData()">查询</el-button>
        <!-- 数据 -->
        <el-table :data="employData" border style="width: 100%;margin-top:15px">
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column prop="staffName" label="姓名" width="150"></el-table-column>
            <el-table-column prop="staffSex" label="性别" width="150"></el-table-column>
            <el-table-column prop="staffAge" label="年龄" width="150"></el-table-column>
            <el-table-column prop="staffTel" label="电话" width="150"></el-table-column>
            <el-table-column prop="staffAddress" label="地址" width="170"></el-table-column>
            <el-table-column prop="staffDate" label="生日" width="170"></el-table-column>
            <el-table-column prop="staffSal" :formatter="staffSal" label="薪资" width="150"></el-table-column>
            <el-table-column prop="jobName" label="职位" width="150"></el-table-column>
            <el-table-column prop="deptName" label="部门" width="150"></el-table-column>
            <el-table-column prop="shireDate" label="入职日期" width="170"></el-table-column>
            <el-table-column prop="snickName" label="登录账户" width="150"></el-table-column>
            <el-table-column prop="staffState" label="用户状态" width="150"></el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="updateEmploy(scope.row)" type="warning" size="mini">修改</el-button>
                    <el-button v-if="scope.row.stateId === '1' || scope.row.stateId === '3' " type="danger" size="mini" @click="quitBtn(scope.row.sid,scope.row.staffName)">禁用</el-button>
                    <el-button v-if="scope.row.stateId === '2' " type="success" size="mini" @click="enableBtn(scope.row.sid,scope.row.staffName)">启用</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            style="margin-top:15px"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[5, 6, 7]"
            :page-size="searchForm.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals">
        </el-pagination>
        <!-- 查看弹窗 -->
        <el-dialog title="修改员工信息" :visible.sync="updateDialogFormVisible" style="margin-top:-80px">
            <el-form :model="updateForm">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.staffName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.staffSex" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.staffAge" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.staffTel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth">
                    <el-input v-model="updateForm.staffAddress" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="薪资" :label-width="formLabelWidth">
                    <el-input autocomplete="off" v-model="updateForm.staffSal"></el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-select v-model="updateForm.jobId" placeholder="请选择职位">
                        <el-option v-for="(item,index) in JobData" :key="index" :label="item.roleName" :value="item.roleId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-select v-model="updateForm.deptId" filterable placeholder="请选择">
                        <el-option
                        v-for="item in DeptData"
                        :key="item.deptNo"
                        :label="item.deptName"
                        :value="item.deptId">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateDialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateStaffInfo()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data(){
        return{
            reqPrefix:'/employInfo',
            employData:[],
            searchForm:{
                page:1,
                size:6,
                name:'',
                snick:''
            },
            totals:0,
            updateForm:{},
            formLabelWidth: '100px',
            updateDialogFormVisible:false,
            JobData:[],
            DeptData:[]
        }
    },
    created(){
        this.getEmployInfo();
        this.getJob();
        this.getDept();
    },
    methods:{
        // 数据
        getEmployInfo(){
            this.$http.post(this.reqPrefix+'/getEmployInfo',this.searchForm).then((res)=>{
                // console.log(res);
                if(res.code === 200){
                    this.employData = res.data.employList;
                    //转换为数字
                    this.totals = res.data.totals - 0;
                }
            })
        },
        //职位
        getJob(){
            this.$http.get("/job/queryJobByPage/1/1000?jobName= ").then((result)=>{
                // console.log(result);
                if(result.code === 200){
                    this.JobData = result.data.jobList;
                }else{
                    this.$message.error("获取职位失败,请联系管理员!!!");
                }
            }).catch((err)=>{
                console.log(err);
                this.$message.error("系统错误,请联系管理员!!!");
            });
        },
        //部门
        getDept(){
            this.$http.post('/deptInfo/getDeptInfo',{}).then((res)=>{
                // console.log(res);
                if(res.code === 200){
                    this.DeptData = res.data.deptList;
                }else{
                    this.$message.error("获取部门失败,请联系管理员!!!");
                }
            }).catch((err)=>{
                this.$message.error("获取部门失败,请联系管理员!!!");
            });
        },
        //格式化薪资
        staffSal(val){
            return '********';
        },
        // 清空
        clearSearchForm(){
            this.getEmployInfo();
        },
        //搜索
        searchData(){
            this.getEmployInfo();
        },
        //修改
        updateEmploy(row){
            this.updateForm = row;
            this.updateDialogFormVisible = true;
        },
        //修改
        updateStaffInfo(){
            this.$http.post(this.reqPrefix+'/updateStaffInfo',this.updateForm).then((res)=>{
                // console.log(res.code);
                if(res.code === 200 && res.data){
                    this.getEmployInfo();
                    this.updateDialogFormVisible = false;
                    this.$message.success("修改成功!!!");
                }else{
                    this.$message.error("修改失败!!!");
                }
            }).catch((err)=>{
                this.$message.error("修改失败!!!");
            });
        },
        //分页
        handleSizeChange(val) {
            this.searchForm.size = val;
            this.getEmployInfo();
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.searchForm.page = val;
            this.getEmployInfo();
            console.log(`当前页: ${val}`);
        },
        // 离职按钮
        quitBtn(val,val1){
            this.$confirm('此操作将<<' + val1 + '>>修改为离职状态?,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post(this.reqPrefix+'/prohibitEmploy','sid='+val).then((res)=>{
                    if(res.code === 200 && res.data){
                        this.getEmployInfo();
                        this.$message.success(val1+"<<>>修改离职状态成功!!!");
                    }else{
                        this.$message.error("修改失败!!!");
                    }
                }).catch((err)=>{
                    this.$message.error("修改失败!!!");
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作!!!'
                });
            });
        },
        //启用、入职
        enableBtn(val,val1){
            this.$confirm('此操作将<<' + val1 + '>>修改为入职状态?,是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post(this.reqPrefix+'/inductionEmploy','sid='+val).then((res)=>{
                    if(res.code === 200 && res.data){
                        this.getEmployInfo();
                        this.$message.success(val1+"<<>>修改入职状态成功!!!");
                    }else{
                        this.$message.error("修改失败!!!");
                    }
                }).catch((err)=>{
                    this.$message.error("修改失败!!!");
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消操作!!!'
                });
            });
        }
    }
}
</script>

<style scoped>
.emp-box .search-box{
    width:30%;
    margin-top:20px;
}

</style>
